import { useState } from "react";
import { NodeContainer, InputHandle, OutputHandle } from "./NodeBase";
import { Button, Space, Typography } from "antd";
const { Text } = Typography;

function ImageDisplayNode({ data }) {
  return (
    <>
      <InputHandle label="image" id="0" />

      <NodeContainer title="显示图片" description="在画布中显示图片" />
    </>
  );
}

function ImageImportNode({ data }) {
  //const [filename, setfileName] = useState("");
  return (
    <>
      <OutputHandle label="image" id="0" />

      <NodeContainer title="导入图片">
        <Space direction="vertical">
          <Button onClick={onClick} block>
            导入
          </Button>
          <Text type="secondary">{data.options["filename"]}</Text>
        </Space>
      </NodeContainer>
    </>
  );

  async function onClick() {
    try {
      const { path, filename } = await IM.open();
      data.options["path"] = path;
      data.options.filename = filename;

      console.log(data.options["path"]);
    } catch (e) {
      console.log(e);
    }
  }
}

export { ImageDisplayNode, ImageImportNode };
